<template lang="html">
    <div class="cart">


        <empty v-if="proInfo == null || proInfo.length == 0"></empty>


        <div class="payPage" v-if="proInfo != null ">
            <!-- 每家店铺重复这个goods div -->
            <div class="goods" v-for="item in proInfo">
              <p>
                  <img src="../../assets/images/shopIcon.png" alt="">
                  <span v-text="item.shop_info.cn_name"></span>
                  <b v-text="">领券</b>
              </p>
              <ul>
                  <!-- 同一家店铺的不同商品重复li -->
                  <li>
                      <input type="checkbox" class="select oneSelect"  @change="singleSelect()" v-model="item.isCheck"/><i class="coverBg"></i>
                      <img :src="item.image_urls_head[0]" alt="">
                      <div>
                          <p>
                              <span v-text="item.title"></span>
                              <em v-text="'￥'+ item.low_price.toFixed(1)"></em>
                          </p>
                          <h3>
                              <span v-text="item.thisColor + ';'" v-if="item.hasOwnProperty('thisColor')"></span>
                              <span v-text="item.size" v-if="item.hasOwnProperty('size')"></span>
                          </h3>
                          <div>
                              <b class="reduce" @click="reduce(item.product_id, item.size,item.thisColor)">-</b>
                              <input type="text" name="" :value="item.count" readonly="">
                              <b class="add" @click="add(item.product_id, item.size,item.thisColor)">+</b>
                          </div>
                      </div>
                  </li>
              </ul>
              <h2 class="shopTotal" v-if="item.isCheck">
                  共<b>4</b>件商品,合计:<em v-text="'￥'+ (item.low_price*item.count).toFixed(2)"></em>
              </h2>
            </div>
            <!-- 为了空开下面支付挡住的部分 -->
            <div class="justSpace"></div>
            <!-- 支付条 -->
            <div class="total">
                <input id="all" type="checkbox" class="select totalAllSelect" v-model="allCheck" @change="allSelect()"/><i class="coverBg"></i>
                <span><label for="all">全选</label></span>
                <b>合计：<em v-text="'￥'+ totalPrice().toFixed(2)"></em></b>
                <a class="toPay" @click="pay()">去支付</a>
            </div>
            <p id="alert" v-if="flag1">未选中任何商品，不能支付</p>
        </div>
  </div>
</template>

<script>
    import Empty from './cartEmpty'
    export default{
        components:{
            Empty
        },
        data () {
            return {
                proInfo: [],
                allCheck: false,
                flag1: false
            }
        },
        created () {
            this.proInfo = JSON.parse( sessionStorage.getItem('goodslist') );
            // console.log(this.proInfo[0].product_id);
            // console.log(this.proInfo[1]);
            // console.log(this.proInfo);
        },
        methods: {
            add (id, a, b) {
                for (var i = 0; i < this.proInfo.length; i++) {
                    if (id == this.proInfo[i].product_id && a == this.proInfo[i].size && b == this.proInfo[i].thisColor) {
						this.proInfo[i].count ++;
                        sessionStorage.removeItem('goodslist');
                        sessionStorage.setItem("goodslist", JSON.stringify(this.proInfo));
					}
                }
            },
            reduce (id, a, b) {
                for (var i = 0; i < this.proInfo.length; i++) {
                    if (id == this.proInfo[i].product_id && a == this.proInfo[i].size && b == this.proInfo[i].thisColor && this.proInfo[i].count == 1) {
                        this.proInfo.splice(i, 1);
                        sessionStorage.removeItem('goodslist');
                        sessionStorage.setItem("goodslist", JSON.stringify(this.proInfo));
                        return;
                    }
                    if (id == this.proInfo[i].product_id && a == this.proInfo[i].size && b == this.proInfo[i].thisColor && this.proInfo[i].count >= 2) {
						this.proInfo[i].count --;
                        sessionStorage.removeItem('goodslist');
                        sessionStorage.setItem("goodslist", JSON.stringify(this.proInfo));
					}
                }
            },
            allSelect () {
               this.proInfo.forEach(item => {
                   item.isCheck = this.allCheck
                   sessionStorage.removeItem('goodslist');
                   sessionStorage.setItem("goodslist", JSON.stringify(this.proInfo));
               })
           },
           singleSelect () {
               var selectData = this.proInfo.filter(item => {
                   return item.isCheck == true;
               })
               selectData.length == this.proInfo.length ? this.allCheck = true : this.allCheck = false;
               sessionStorage.removeItem('goodslist');
               sessionStorage.setItem("goodslist", JSON.stringify(this.proInfo));
           },
           totalPrice () {
               var totalPrice = 0;
               for (var i = 0; i < this.proInfo.length; i++) {
                   if (this.proInfo[i].isCheck == true) {
                       totalPrice += this.proInfo[i].low_price * this.proInfo[i].count;
                   }
               }
               return totalPrice;
           },
           pay () {
               for (var i = 0; i < this.proInfo.length; i++) {
                   if (this.proInfo[i].isCheck == true) {
                       window.location="#/pay";
                       return;
                   }
               }
               this.flag1 = true;
               var that  = this;
               setTimeout(function () {
                   that.flag1 = false;
               }, 2000);
           }
        }

    }
</script>

<style lang="css" scoped >
    #alert{
        position: fixed;
        left: 25%;
        top: 45%;
        font-size: 12px;
        color: #fff;
        background: #666;
        padding: 5px 10px;
    }
    .cart{
        width: 26.67rem;
        min-height: 47.33rem;
    }
    .payPage{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 11;
        background-color: #F7F7F7;
        color: #333;
    }
    .payPage .goods{
        min-height: 11.83rem;
        margin-top: 10px;
        background: #fff;
    }
    .payPage .justSpace{
        height: 4.17rem;
    }
    .payPage .goods > p{
        height: 3.42rem;
        line-height: 3.42rem;
        border-bottom: 1px solid #ddd;
    }
    .select{
        width: 18px;
        height: 18px;
        position: absolute;
        top: .9rem;
        left: .83rem;
        vertical-align: top;
        outline: none;
        z-index: 15;
        opacity: 0;
    }
    .coverBg{
        width: 18px;
        height: 18px;
        background: url(../../assets/images/noxz.png)0 0 / 100% 100% no-repeat;
        position: absolute;
        top: .9rem;
        left: .83rem;
        z-index: 14;
    }
    .select:checked ~.coverBg{
        background: url(../../assets/images/choose.png)0 0/ 105% 105% no-repeat !important;
    }
    .payPage .goods > p{
        position: relative;
    }
    .payPage .goods > p img{
        float: left;
        width: 2.08rem;
        height: 1.83rem;
        margin: .8rem .83rem 0 1rem;
        vertical-align: top;
    }
    .payPage .goods > p span{
        float: left;
        width: 16rem;
        line-height: 3.42rem;
        font-size: 1.33rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .payPage .goods > p b{
        float: right;
        font-size: 16px;
        color: #ff4656;
        margin-right: 10px;
    }
    .payPage .goods > ul{
        width: 93.7%;
        margin: 0 auto;
    }
    .payPage .goods > ul li{
        height: 7.58rem;
        padding-top: 10px;
        position: relative;
        border-bottom: 1px solid #ddd;
    }
    .payPage .goods ul li .select{
        top: 3.3rem;
        left: 0;
    }
    .payPage .goods ul li .coverBg{
        top: 3.3rem;
        left: 0;
    }
    .payPage .goods ul li img{
        float: left;
        width: 7.08rem;
        height: 7.08rem;
        margin-right: 4.5px;
        margin-left: 2rem;
    }
    .payPage .goods ul li div{
        float: right;
        width: 15rem;
        height: 7.58rem;
    }
    .payPage .goods ul li div span{
        float: left;
        width: 10.79rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .payPage .goods ul li div p{
        height: 2.08rem;
        line-height: 20px;
        font-size: 14px;
        font-weight: bold;
    }
    .payPage .goods ul li div p em{
        float: right;
        font-size: 16px;
        font-weight: 400;
        color: #5d5d5d;
    }
    .payPage .goods ul li div h3{
        color: #aaa;
        font-size: 13px;
        padding: 2px 18px 2px 2px;
        border: 1px solid #fff;
        display: flex;
    }
    .payPage .goods ul li div h3 span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .payPage .goods ul li div > div{
        float: left;
        width: 102px;
        height: 28px;
        border: 1px solid #ccc;
    }
    .payPage .goods ul li div > div b{
        float: left;
        width: 30px;
        height: 28px;
        line-height: 26px;
        text-align: center;
        font-weight: 700;
        font-size: 1.5rem;
        color: #aaa;
        cursor: pointer;
    }
    .payPage .goods ul li div > div .reduce{
        border-right: 1px solid #ddd;
    }
    .payPage .goods ul li div > div .add{
        border-left: 1px solid #ddd;
    }
    .payPage .goods ul li div > div input{
        float: left;
        width: 40px;
        height: 28px;
        text-align: center;
        border: 0;
        padding: 0;
        outline: none;
    }
    .payPage .goods h2{
        width: 100%;
        height: 3.33rem;
        text-align: center;
        color: #212121;
        font-size: 14px;
        line-height: 40px;
    }
    .payPage .goods h2 em{
        color: #fe5164;
        font-size: 16px;
    }
    .payPage .total{
        width: 100%;
        height: 3.33rem;
        line-height: 3.4rem;
        background: #fff;
        border-top: 1px solid #ddd;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 16;
    }
    .payPage .total .select{
        top: .83rem;
        left: .83rem;
        z-index: 20;
    }
    .payPage .total .select .coverBg{
        top: .83rem;
        left: .83rem;
        z-index: 20;
    }
    .payPage .total span{
        float: left;
        width: 5.88rem;
        height: 3.33rem;
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        margin-left: 2.7rem;
    }
    .payPage .total b{
        float: left;
        width: 9.83rem;
        height: 3.33rem;
        font-size: 14px;
        text-align: center;
    }
    .payPage .total b em{
        color: #fe5164;
        font-size: 16px;
        font-weight: 400;
    }
    .payPage .total .toPay{
        float: right;
        width: 7.92rem;
        height: 3.3rem;
        text-align: center;
        color: #fff;
        font-size: 14px;
        background: #fe5164;
    }


</style>
